<template>
  <div class="project">
    <Card :bordered="false">
      <Form ref="form" :model="formData" :rules="ruleCustom" label-position="top">
        <div class="handle-project">
          <!--基本配置开始-->
          <div class="conf-block basic-conf">
            <h4 class="conf-title">基本配置</h4>
            <hr class="split">
            <FormItem style="display: none" v-if="formData.id">
              <label>
                <Input v-model="formData.id" :value="formData.id"/>
              </label>
            </FormItem>
            <Row :gutter="50">
              <Col span="6">
                <FormItem label="项目名称" prop="name">
                  <label>
                    <Input v-model="formData.name" clearable placeholder="请填写项目名称"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="部署环境" prop="level">
                  <label>
                    <Select clearable transfer filterable v-model="formData.level">
                      <Option v-for="item in environmentData" :value="item.id" :key="item.name">{{ item.name }}</Option>
                    </Select>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem prop="deploy_from">
                 <span slot="label">本地仓库保存地址
                    <Tooltip max-width="200" content="代码的检出存放路径" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                  <label>
                    <Input v-model="formData.deploy_from" clearable placeholder="请填写代码检出仓库存放路径"/>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="50">
              <Col span="6">
                <FormItem label="Git远程仓库地址" prop="repo_url">
                  <label>
                    <Input v-model="formData.repo_url" clearable placeholder="请填写远程仓库地址"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="分支/tag" prop="repo_mode">
                  <label>
                    <Select clearable transfer filterable v-model="formData.repo_mode">
                      <Option value="branch">branch</Option>
                      <Option value="tag">tag</Option>
                    </Select>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem prop="workspace_id">
                 <span slot="label">所属部门
                    <Tooltip max-width="200" content="所属部门" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                  <label>
                    <Select clearable transfer filterable v-model="formData.workspace_id">
                      <Option v-for="item in workspaceData" :value="item.id" :key="item.name">{{ item.name }}</Option>
                    </Select>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="50">
              <Col span="12">
                <FormItem>
                  <label>
                  <span slot="label">部署排除文件
                    <Tooltip max-width="200" content="剔除不上线的文件、目录，每行一个" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                    <Input
                      v-model="formData.excludes"
                      placeholder="请填写部署时需要排除的文件"
                      type="textarea" :rows="8"/>
                  </label>
                </FormItem>
              </Col>
            </Row>
          </div>
          <!--基本配置结束-->
          <!--目标集群开始-->
          <div class="conf-block  remote-conf">
            <h4 class="conf-title">目标集群</h4>
            <hr class="split">
            <Row :gutter="50">
              <Col span="6">
                <FormItem prop="release_user">
                  <label>
                  <span slot="label">目标集群部署用户
                    <Tooltip max-width="200" content="代码的部署的用户，一般是运行的服务的用户，如php进程用户www"
                             placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                    <Input v-model="formData.release_user" clearable placeholder="请填写目标集群部署用户如 www"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem prop="release_to">
                <span slot="label">目标集群部署路径
                    <Tooltip max-width="200" content="代码的最终部署路径，请不要在目标机新建此目录，系统会自动生成此软链，正确设置父目级录即可"
                             placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                  <label>
                    <Input v-model="formData.release_to" clearable placeholder="请填写目标集群部署路径"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem prop="release_library">
                  <span slot="label">目标集群发布版本库
                    <Tooltip max-width="200" content="代码发布的版本库，每次发布更新webroot的软链到当前最新版本" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                  </span>
                  <Input v-model="formData.release_library" clearable placeholder="请填写目标集群发布版本库"/>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="目标集群部署仓库版本保留数" prop="keep_version_num">
                 <span slot="label">目标集群部署仓库版本保留数
                    <Tooltip max-width="200" content="历史版本将被删除，只可回滚保留的版本" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                  <label>
                    <Input v-model="formData.keep_version_num" clearable placeholder="请填写版本保留数"/>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="50">
              <Col span="6">
                <FormItem>
                 <span slot="label">绑定阿里云SLB
                    <Tooltip max-width="200" content="开启后，部署时将实时获取负载均衡机器IP" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                  <i-switch v-model="aliyun_sync">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
                <div v-if="!aliyun_sync">
                  <FormItem prop="hosts">
                  <span slot="label">机器列表
                    <Tooltip max-width="200" content="要发布的机器列表，一行一个" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                  </span>
                    <label>
                      <Input v-model="formData.hosts"
                             type="textarea" :rows="8"
                             :placeholder="placeholder"/>
                    </label>
                  </FormItem>
                </div>
                <div v-else>
                  <FormItem label="负载均衡地域ID" prop="aliyun_region">
                    <label>
                      <Input v-model="formData.aliyun_region" placeholder="cn-shanghai"/>
                    </label>
                  </FormItem>
                  <FormItem label="负载均衡实例ID" prop="aliyun_id">
                    <label>
                      <Input v-model="formData.aliyun_id" placeholder="请填写负载均衡实例ID"/>
                    </label>
                  </FormItem>
                  <FormItem label="监听端口" prop="aliyun_listen_port">
                    <label>
                      <Select v-model="formData.aliyun_listen_port">
                        <Option v-for="port in listenPort" :value="port">{{port}}</Option>
                      </Select>
                    </label>
                  </FormItem>
                </div>
              </Col>
              <Col span="6">
                <FormItem label="开启灰度">
                <span slot="label">开启灰度
                    <Tooltip max-width="200" content="开启后代码将发布到灰度服务器" placement="top-start">
                      <Icon type="ios-information-circle"/>
                    </Tooltip>
                </span>
                  <i-switch v-model="open_gray">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
                <FormItem label="灰度机器列表" prop="gray_hosts" v-if="open_gray">
                <span slot="label">灰度机器列表
                  <Tooltip max-width="200" content="要发布的灰度机器列表，一行一个" placement="top-start">
                    <Icon type="ios-information-circle"/>
                  </Tooltip>
                </span>
                  <label>
                    <Input v-model="formData.gray_hosts" type="textarea" :rows="8" :placeholder="placeholder"/>
                  </label>
                </FormItem>
              </Col>
            </Row>
          </div>
          <!--目标集群结束-->

          <!--任务配置开始-->
          <div class="conf-block task-conf">
            <h4 class="conf-title">任务配置</h4>
            <hr class="split">
            <Row :gutter="50">
              <Col span="6">
                <FormItem label="高级任务-Deploy前置任务">
                <span slot="label">高级任务-Deploy前置任务
                  <Tooltip max-width="200" content="在部署代码之前的准备工作，如git的一些前置检查、vendor的安装（更新），一行一条" placement="top-start">
                    <Icon type="ios-information-circle"/>
                  </Tooltip>
                </span>
                  <label>
                    <Input
                      v-model="formData.pre_deploy" clearable
                      placeholder="请填写Deploy前置任务"
                      type="textarea" :rows="8"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem>
                <span slot="label">高级任务-Deploy后置任务
                  <Tooltip max-width="200"
                           content="git代码检出之后，可能做一些调整处理，如vendor拷贝，环境适配（mv config-test.php config.php），一行一条"
                           placement="top-start">
                    <Icon type="ios-information-circle"/>
                  </Tooltip>
                </span>
                  <label>
                    <Input
                      v-model="formData.post_deploy" clearable
                      placeholder="请填写Deploy后置任务"
                      type="textarea" :rows="8"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem>
               <span slot="label">高级任务-Release前置任务
                <Tooltip max-width="200" content='同步完所有目标机器之后，更改版本软链之前触发任务。java可能要做一些暂停服务的操作(双引号将会被转义为\")'
                         placement="top-start">
                  <Icon type="ios-information-circle"/>
                </Tooltip>
                </span>
                  <label>
                    <Input
                      v-model="formData.pre_release" clearable
                      placeholder="请填写Release前置任务"
                      type="textarea" :rows="8"/>
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="">
                <span slot="label">高级任务-Release后置任务
                <Tooltip max-width="200"
                         content='所有目标机器都部署完毕之后，做一些清理工作，如删除缓存、平滑重载/重启服务（nginx、php、task），一行一条(双引号将会被转义为\")'
                         placement="top-start">
                  <Icon type="ios-information-circle"/>
                </Tooltip>
                </span>
                  <label>
                    <Input
                      v-model="formData.post_release" clearable
                      placeholder="请填写Release后置任务"
                      type="textarea" :rows="8"/>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="50">
              <Col span="6">
                <FormItem>
                <span slot="label">开启Ansible
                  <Tooltip max-width="200" content="开启后，通过Ansible并发传输提高速度，集群服务器需要安装Ansible" placement="top-start">
                    <Icon type="ios-information-circle"/>
                  </Tooltip>
                </span>
                  <i-switch v-model="ansible">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem>
                 <span slot="label">开启审核
                  <Tooltip max-width="200" content="开启后，用户需要提交上线单需要审核方可上线" placement="top-start">
                    <Icon type="ios-information-circle"/>
                  </Tooltip>
                </span>
                  <i-switch v-model="audit">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="">
                 <span slot="label">状态
                  <Tooltip max-width="200" content="关闭后，用户不能对此项目发起上线" placement="top-start">
                    <Icon type="ios-information-circle"/>
                  </Tooltip>
                </span>
                  <i-switch v-model="status">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
              </Col>
            </Row>
          </div>
          <!--任务配置结束-->
        </div>
        <Button
          type="primary"
          size="large"
          @click="handleSubmit('form')">确认
        </Button>
      </Form>
    </Card>
  </div>
</template>

<script>
  import './index.less'
  import { showProject, editProject, addProject, slbPort } from '@/api/project'
  import { getWorkSpaceList } from '@/api/workspace'
  import { environment } from '@/api/environment'
  import { getCookie, setCookie } from '@/libs/cookie'

  export default {
    name: 'handle',
    created () {
      let id = this.$route.params.project_id || ''
      if (id) {
        this.id = id
        this.handleGetProjectDetail(id)
      }
      getWorkSpaceList().then(res => {
        this.workspaceData = res.data
      })
      environment().then(res => {
        this.environmentData = res.data
      })
    },
    watch: {
      '$route' () {
        let id = Number(this.$route.params.project_id) || ''
        if (id) {
          this.id = id
          this.handleGetProjectDetail(id)
        }
      }
    },
    data () {
      return {
        id: 0,
        open_gray: false,
        aliyun_sync: false,
        ansible: false,
        audit: false,
        status: true,
        workspaceData: {},
        environmentData: {},
        formData: {},
        listenPort: [],
        placeholder: '192.168.1.1\n192.168.1.1:9527',
        ruleCustom: {
          name: [
            { required: true, message: '名称必填', trigger: 'blur' }
          ],
          repo_url: [
            { required: true, message: 'git仓库地址必填', trigger: 'blur' }
          ],
          deploy_from: [
            { required: true, message: '代码的检出存放路径必填', trigger: 'blur' }
          ],
          level: [
            { required: true, message: '部署环境必填', trigger: 'blur', type: 'number' },
          ],
          repo_mode: [
            { required: true, message: '上线方式必填', trigger: 'blur' },
          ],
          workspace_id: [
            { required: true, message: '部门必填', trigger: 'blur', type: 'number' },
          ],
          release_user: [
            { required: true, message: '目标集群部署用户必填', trigger: 'blur' }
          ],
          release_to: [
            { required: true, message: '目标集群部署路径必填', trigger: 'blur' }
          ],
          release_library: [
            { required: true, message: '目标集群发布版本库必填', trigger: 'blur' }
          ],
          keep_version_num: [
            { required: true, message: '目标集群部署仓库版本保留数必填', trigger: 'blur' }
          ],
          aliyun_region: [
            { required: true, message: '负载均衡地域ID必填', trigger: 'blur' }
          ],
          hosts: [
            { required: true, message: '机器列表必填', trigger: 'blur' }
          ],
          gray_hosts: [
            { required: true, message: '灰度机器列表必填', trigger: 'blur' }
          ],
          aliyun_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请填写负载均衡实例ID必填'))
              } else {
                this.handleGetSlbPort(this.formData.aliyun_region, this.formData.aliyun_id)
                callback()
              }
            },
            trigger: 'blur'
          }],
          aliyun_listen_port: [
            { required: true, message: '负载均衡实例监听端口必填', trigger: 'blur', type: 'number' }
          ],
        }
      }
    },
    methods: {
      handleGetProjectDetail: function (id) {
        showProject({ id }).then(res => {
          this.formData = res.data
          this.open_gray = (this.formData.is_open_gray === 1)
          this.aliyun_sync = (this.formData.aliyun_sync === 1)
          this.handleGetSlbPort(this.formData.aliyun_region, this.formData.aliyun_id)
          this.ansible = (this.formData.ansible === 1)
          this.audit = (this.formData.audit === 1)
          this.status = (this.formData.status === 1)
        })
      },
      handleSubmit: function (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.formData.is_open_gray = this.open_gray === true ? 1 : 0
            this.formData.aliyun_sync = this.aliyun_sync === true ? 1 : 0
            this.formData.ansible = this.ansible === true ? 1 : 0
            this.formData.audit = this.audit === true ? 1 : 0
            this.formData.status = this.status === true ? 1 : 0
            if (this.id) {
              editProject(this.formData).then(res => {
                this.$Message.success(res.message)
                setCookie('project_detail_' + this.id, '')
                this.handleGetProjectDetail(this.id)
              })
            } else {
              addProject(this.formData).then(res => {
                this.$Message.success(res.message)
              })
              this.$router.push('/project/index')
            }
          } else {
            return false
          }
        })
      },
      //获取阿里云SLB端口列表
      handleGetSlbPort: function (aliyun_region, aliyun_id) {
        if (aliyun_region && aliyun_id) {
          slbPort({ aliyun_region, aliyun_id }).then(res => {
            this.listenPort = res.data
          })
        }
      },
    }
  }
</script>

<style scoped>

</style>
